#{extends 'auth_main.html' /}

#{set "moreStyles"}
<style type="text/css">
</style>
#{/set}

#{set 'moreScripts'}

<script type="text/javascript">
    var listAction = #{jsAction @Functions.ajaxList() /}

    $(function () {
        // Dialog
        $('#popup_func_dialog').dialog({
            autoOpen:false,
            width:600,
            height:400,
            modal:true,
            resizable: false,
//            type:'iframe',
            buttons:{
                "确定":function () {
                    var parentFuncInfo=$("input[name='parentFuncChosen']:checked").val();
                    var pfi=parentFuncInfo.split("|");
                    $("#parentId").val(pfi[0]);
                    $("#parentName").html(pfi[1]);
                    $(this).dialog("close");
                },
                "取消":function () {
                    $(this).dialog("close");
                }
            }
        });

        // Dialog Link
        $('#dialog_link').click(function () {
            $('#popup_func_dialog').load(
                    listAction(),
                    function () {
                        //$('#popup_func_dialog').css('visibility', 'visible')
                    }
            );
            $('#popup_func_dialog').css('display', '');
            $('#popup_func_dialog').dialog('open');
            return false;
        });

        // -------- add function dialog
        $('#add_div').dialog({
            autoOpen:false,
            width:400,
            modal:true,
            resizable: false,
            buttons:{
                "保存":function () {
                    if(submitNewEntity())
                        $(this).dialog("close");
                },
                "取消":function () {
                    cancelNewEntity();
                    $(this).dialog("close");
                }
            }
        });

        // Dialog Link
        $('#create_link').click(function () {
            $('#add_div').css('display', '');
            cleanAddForm();
            $('#add_div').dialog('open');
            return false;
        });
    });

    function cleanAddForm() {
        document.getElementById('name').value = '';
        document.getElementById('key').value = '';
        document.getElementById('remark').value = '';
        document.getElementById('add_div').style.display = '';
        document.getElementById('parentName').innerHTML = '';
        document.getElementById('parentId').value = '';
    }

    function cancelNewEntity() {
        document.getElementById('add_div').style.display = 'none';
    }

    function submitNewEntity() {
        var result=false;

        if ($("#name").val().trim() == "") {
            jqAlert("请输入功能名");
        }
        else if ($("#key").val().trim() == "") {
            jqAlert("请输入键值");
        }
        else {
            document.getElementById('add_form').submit();
            result=true;
        }
        return result;
    }
</script>
#{/set}


<h1 id="title">功能管理</h1>
<div class="light_bar">
${entityList.size()} / ${entityCount} 功能
    &nbsp;
    <a href="#" id="create_link" class="ui-state-default ui-corner-all dialog_button">
        <span class="ui-icon ui-icon-newwin"></span>新增功能</a>

#{pagination page:pageSequence ?: 1, size:entityCount /}

</div>


<table id="func_list">
    <thead>
    <tr>
        *{<th class="main" width="40px">ID</th>}*
        <th class="main" width="180px">功能名</th>
        <th class="main" width="120px">键值</th>
        <th class="main">备注</th>
        <th class="main" width="80px">上级功能</th>
        <th class="main" width="80px">创建时间</th>
        <th class="main" width="80px">最后更新</th>
        <th width="100px">操作</th>
    </tr>
    </thead>
#{if entityList.size()>0}
    #{list items:entityList, as:'func'}
        <tr>
            *{<td class="main">${func.id}</td>}*
            <td class="main">${func.name}</td>
            <td class="main">${func.key}</td>
            <td class="main">${func.remark}</td>
            <td class="main">${func.parent==null?"----":func.parent.name}</td>
            <td class="main">${func.createDate.format("yyyy-MM-dd")}</td>
            <td class="main">${func.lastUpdate?func.lastUpdate.format("yyyy-MM-dd"):""}</td>
            <td class="main">
                *{<a class="ui-state-default ui-corner-all opt_button" href="#" >编辑</a>}*
                <a class="ui-state-default ui-corner-all opt_button" href="javascript:requireActionByPost('@{Functions.delete}','${func.id}','确定删除功能(${func.name})？');">删除</a>
            </td>
        </tr>
    #{/list}
#{/if}
</table>



<div id="add_div" style="display: none;" title="新增功能">
    <form id="add_form" action="@{Functions.create}" method="post">
        <table class="myTable">
            <tr>
                <td align="right" class="input_label"><label for="name" class="input_required">功能名：</label></td>
                <td><input id="name" name="name" type="text" maxlength="50"/></td>
            </tr>
            <tr>
                <td align="right" class="input_label"><label for="key" class="input_required">键值：</label></td>
                <td><input id="key" name="key" type="text" maxlength="50"/></td>
            </tr>
            <tr>
                <td align="right" class="input_label"><label for="remark">备注：</label></td>
                <td><input id="remark" name="remark" type="text" maxlength="20"/></td>
            </tr>
            <tr class="no_bottom">
                <td align="right" class="input_label no_bottom"><label for="remark">上级功能：</label></td>
                <td class="no_bottom">
                    <input type="hidden" id="parentId" name="parentId" type="text" maxlength="20"/>
                    <a href="#" id="dialog_link" class="ui-state-default ui-corner-all dialog_button"><span class="ui-icon ui-icon-newwin"></span>选择</a>
                    <span id="parentName"></span>
                </td>
            </tr>
        </table>
    </form>
</div>

*{#{include 'Functions/ajaxList.html'/}}*

<div id="popup_func_dialog" title="功能选择窗口" style="display: none">
</div>